<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>交易记录管理</title>
    <!-- 引入 Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h2 class="text-center mb-4">交易记录管理</h2>

    <!-- 查询表单 -->
    <form class="row g-3 mb-4" method="get" th:action="@{/trade/list}">
        <div class="col-md-3">
            <label for="cardId" class="form-label">银行卡号</label>
            <input type="text" class="form-control" id="cardId" name="cardId" th:value="${cardId}">
        </div>
        <div class="col-md-3">
            <label for="tradeType" class="form-label">交易类型</label>
            <select class="form-select" id="tradeType" name="tradeType">
                <option value="">-- 全部 --</option>
                <option value="存款" th:selected="${tradeType == '存款'}">存款</option>
                <option value="取款" th:selected="${tradeType == '取款'}">取款</option>
                <option value="转账" th:selected="${tradeType == '转账'}">转账</option>
            </select>
        </div>
        <div class="col-md-3 d-flex align-items-end">
            <button type="submit" class="btn btn-primary me-2">查询</button>
            <a th:href="@{/trade/list}" class="btn btn-secondary me-2">重置</a >
        </div>
    </form>

    <!-- 导出按钮 -->
    <div class="mb-3">
        <a th:href="@{/trade/export}" class="btn btn-success">导出 CSV</a >
    </div>

    <!-- 表格展示 -->
    <table class="table table-bordered table-hover align-middle text-center">
        <thead class="table-light">
        <tr>
            <th>序号</th>
            <th>交易时间</th>
            <th>交易类型</th>
            <th>交易金额</th>
            <th>银行卡号</th>
            <th>备注</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="trade, iterStat : ${tradeList}">
            <td th:text="${iterStat.index + 1}"></td>
            <td th:text="${#dates.format(trade.tradeDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
            <td th:text="${trade.tradeType}"></td>
            <td th:text="${trade.tradeMoney}"></td>
            <td th:text="${trade.cardId}"></td>
            <td th:text="${trade.remark}">-</td>
        </tr>
        <tr th:if="${#lists.isEmpty(tradeList)}">
            <td colspan="6">暂无数据</td>
        </tr>
        </tbody>
    </table>
    <div class="text-center mt-4 mb-4">
        <a th:href="@{/admin/index}" class="btn btn-primary">返回首页</a >
    </div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>